<template>
  <div>
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true" :model="goodsQeury" class="demo-form-inline" size="large">
        <el-form-item label="商品名称">
          <el-input v-model="goodsQeury.proname" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="goodsQeury.category" placeholder="请输入商品分类进行搜索">
            <el-option v-for="item in categores" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-input v-model="goodsQeury.brand" placeholder="请输入商品品牌" />
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="clear">清空</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getGoodsListData">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 12px">
      <el-table :data="goodsList" style="width: 100%">
        <el-table-column label="序号" type="index" width="50px"> </el-table-column>
        <el-table-column label="商品图片" prop="img1">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 80px"
              :src="row.img1"
              :preview-src-list="[row.img1, row.img2, row.img3, row.img4]"
              preview-teleported
            >
              <template #error>
                <div class="image-slot">
                  <img v-error />
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="proname" width="240px" :formatter="formatter">
          <!-- <template #default="{ row }">
            <span>{{ row.proname.substr(0, 30) + '...' }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="品牌" prop="brand"> </el-table-column>
        <el-table-column
          label="分类"
          prop="category"
          :filters="[
            { text: '家电', value: '家电' },
            { text: '图书', value: '图书' },
            { text: '手机', value: '手机' }
          ]"
          :filter-method="filterHandler"
        >
        </el-table-column>
        <el-table-column label="原价" prop="originprice" sortable> </el-table-column>
        <el-table-column label="折扣" prop="discount" sortable> </el-table-column>
        <el-table-column label="销量" prop="sales" sortable> </el-table-column>
        <el-table-column label="是否售卖" prop="issale">
          <template #default="{ row }">
            <el-switch
              v-model="row.issale"
              :active-value="1"
              inactive-value="0"
              @change="changeSwitch(row.proid, 'issale', $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否秒杀" prop="isseckill">
          <template #default="{ row }">
            <el-switch
              v-model="row.isseckill"
              :active-value="1"
              inactive-value="0"
              @change="changeSwitch(row.proid, 'isseckill', $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" prop="isrecommend">
          <template #default="{ row }">
            <el-switch
              v-model="row.isrecommend"
              :active-value="1"
              inactive-value="0"
              @change="changeSwitch(row.proid, 'isrecommend', $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="showGoods(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="goodsQeury.page"
        v-model:page-size="goodsQeury.pageSize"
        :page-sizes="[10, 30, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 商品详情 -->
    <el-dialog v-model="dialogVisible" title="商品详情" fullscreen center>
      <div style="width: 1000px; margin: 0 auto">
        <!-- 轮播图 -->
        <el-carousel height="600px">
          <el-carousel-item v-for="item in goodsDetail.banners[0].split(',')" :key="item">
            <el-image style="width: 1000px" :src="item" />
          </el-carousel-item>
        </el-carousel>
        <h3>{{ goodsDetail.proname }}</h3>
        <h4>品牌:{{ goodsDetail.brand }}</h4>
        <h4>分类:{{ goodsDetail.category }}</h4>
        <h4>
          价格:<span style="color: red">￥ {{ formatPrice(goodsDetail.originprice) }}</span>
        </h4>
        <h4>销量:{{ goodsDetail.sales }}</h4>
        <h4>是否售卖:{{ goodsDetail.issale === 1 ? '是' : '否' }}</h4>
        <h4>是否秒杀:{{ goodsDetail.isseckill === 1 ? '是' : '否' }}</h4>
        <h4>是否推荐:{{ goodsDetail.isrecommend === 1 ? '是' : '否' }}</h4>
        <h4>{{ goodsDetail.desc }}</h4>
        <h4>图文详情</h4>
        <div>
          <el-image :src="goodsDetail.img1"></el-image>
        </div>
        <div>
          <el-image :src="goodsDetail.img2"></el-image>
        </div>
        <div>
          <el-image :src="goodsDetail.img3"></el-image>
        </div>
        <div>
          <el-image :src="goodsDetail.img4"></el-image>
        </div>
      </div>
      <template #footer>
        <el-button type="default" @click="dialogVisible = false">清空</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getCategory, getGoodsList, changeStatus } from '@/api/goods'
import type { goodsQuery, Goods } from '@/types/goods'
import type { TableColumnCtx } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const goodsQeury = ref<goodsQuery>({
  page: 1,
  pageSize: 10,
  proname: '',
  category: '',
  brand: ''
})
const categores = ref<string[]>([])
const goodsList = ref<Goods[]>([])
const total = ref(0)
//商品分类搜索框数据
const getCategoryData = async () => {
  const res = await getCategory()
  categores.value = res.data.data
}
getCategoryData()
//获取商品列表数据
const getGoodsListData = async () => {
  const res = await getGoodsList(goodsQeury.value)
  goodsList.value = res.data.data.items
  total.value = res.data.data.total
}
getGoodsListData()
//清空
const clear = () => {
  goodsQeury.value = {
    page: 1,
    pageSize: 10,
    proname: '',
    category: '',
    brand: ''
  }
  getGoodsListData()
}
//对商品名称做数据格式化
const formatter = (row: Goods) => {
  return row.proname.length > 30 ? row.proname.substring(0, 30) + '...' : row.proname
}
//分类筛选
const filterHandler = (value: string, row: Goods, column: TableColumnCtx<Goods>) => {
  const property = column['property']
  return row[property] === value
}
const handleSizeChange = (pageSize: number) => {
  goodsQeury.value.pageSize = pageSize
  getGoodsListData()
}
const handleCurrentChange = (page: number) => {
  goodsQeury.value.page = page
  getGoodsListData()
}
//根据proid ,type,state更改swich的状态
const changeSwitch = async (
  proid: string,
  type: 'issale' | 'isseckill' | 'isrecommend',
  state: 0 | 1
) => {
  const res = await changeStatus(proid, type, state)
  ElMessage.success(res.data.message)
}
//商品详情
const dialogVisible = ref(false)
const goodsDetail = ref<Goods>()
const showGoods = (row: Goods) => {
  dialogVisible.value = true
  goodsDetail.value = row
}
//数据处理
const formatPrice = (val: number) => {
  return val.toFixed(2)
}
</script>

<style scoped lang="less">
.demo-form-inline {
  margin-top: 20px;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
</style>
